<template>
	<view class="content">
		<view class="left_icon_box">
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/leftIcons.png" class="left_icon"
				v-if="!chooseLoginWay" @click="back"></image>
		</view>

		<view class="">
			<view class="logo">
				<image src="/static/logo.png" mode=""></image>
			</view>
			<!-- <view class="logo_text">已知小课</view> -->
		</view>
		<!-- 登录 -->
		<view class="" v-if="!registerBoolean">
			<!-- 手机号登录 -->
			<view class="moblie_login_box" v-if="chooseLoginWay">
				<view class="flex account_ipt">
					<view class="flex textStyle align-center">
						<view class="">+86</view>
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/drowDown.png" class="drowDownIcon">
						</image>
					</view>
					<input type="number" placeholder="请输入手机号" v-model="smsFrom.phone" />
				</view>
				<!-- // 验证码发送类型 (1 ：登录,2：注册,3：绑定手机号) -->
				<view class="flex password_ipt">
					<view class="textStyle">验证码</view>
					<input class="code_num" type="number" placeholder="请输入验证码" v-model="smsFrom.code" />
					<view class="line"></view>
					<view class="code_text" @click="getMsgCode(1, smsFrom.phone)">
						{{ !codeTime ? '获取验证码' : codeTime + 's后重新获取' }}
					</view>
				</view>
			</view>
			<!-- 账号密码登录 -->
			<view class="password_login_box" v-else>
				<view class="flex account_ipt">
					<text class="textStyle">账号</text>
					<input type="text" v-model="userForm.userName" placeholder="请输入账号" />
				</view>
				<view class="flex password_ipt">
					<text class="textStyle">密码</text>
					<input style="flex: 1" type="text" :password="isPwd" v-model="userForm.password"
						placeholder="请输入密码" />
					<view class="eyes" @click="isPwd = !isPwd">
						<image v-if="isPwd" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/loginIcon/hide.png"
							mode=""></image>
						<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/loginIcon/show.png" mode="">
						</image>
					</view>
				</view>
			</view>

			<view class="flex way_box">
				<view class="password_Login" @click="chooseLoginWay = !chooseLoginWay">
					{{ chooseLoginWay ? '密码登录' : '手机验证登录' }}
				</view>
				<view class="resgister" @click="goRegister">新用户注册</view>
			</view>
			<view class="button_login">
				<u-button type="primary" text="登录" shape="circle" @click="login"></u-button>
			</view>
			<view class="flex align-center">
				<view :class="['check_img_left', agree && !checked ? 'agree_color' : '']" @click="checked = !checked">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/checked.png" v-if="checked"
						class="check_box"></image>
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/nocheck.png" v-else class="check_box">
					</image>
				</view>
				<view class="flex agreement_box">
					<text>我已阅读并同意</text>
					<view class="agreement" @click="userArgeement(5)">《用户协议》</view>
					<text>及</text>
					<view class="agreement" @click="userArgeement(0)">《隐私协议》</view>
				</view>
			</view>
			<view class="remenbers">
				<view :class="['check_img_left', remenber ? '' : '']" @click="remenber = !remenber">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/checked.png" v-if="remenber"
						class="check_box"></image>
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/nocheck.png" v-else class="check_box">
					</image>
				</view>
				<text>记住账号</text>
			</view>
			<view class="bottom_box" v-if="isand">
				<view class="ohter_Login_way">其他登录方式</view>

				<view class="flex felx_column align-center" @click="wxLogin">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/common/wxIcon.png" class="wxIconImg">
					</image>
					<view class="wx_text">微信登录</view>
				</view>
			</view>
		</view>
		<!-- 注册 -->
		<view class="" v-else>
			<view class="moblie_login_box">
				<view class="flex account_ipt">
					<view class="flex textStyle align-center">
						<view class="">+86</view>
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/drowDown.png" class="drowDownIcon">
						</image>
					</view>
					<input type="number" placeholder="请输入手机号" v-model="registerInfo.phone" />
				</view>
				<view class="flex password_ipt">
					<view class="textStyle">验证码</view>
					<input class="code_num" type="number" placeholder="请输入验证码" v-model="registerInfo.vcode" />
					<view class="line"></view>
					<view class="code_text" @click="getMsgCode(2, registerInfo.phone)">
						{{ !codeTime ? '获取验证码' : codeTime + 's后重新获取' }}
					</view>
				</view>
				<view class="flex password_ipts">
					<text class="textStyle">密码</text>
					<input style="flex: 1" type="text" :password="isPwd" v-model="registerInfo.password"
						placeholder="请输入密码" />
					<view class="eyes" @click="isPwd = !isPwd">
						<image v-if="isPwd" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/loginIcon/hide.png"
							mode=""></image>
						<image v-else src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/loginIcon/show.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="register_btn">
				<u-button type="primary" text="注册" shape="circle" @click="registers"></u-button>
			</view>
		</view>
		<!-- 手机号登录绑定微信弹窗 -->
		<u-popup :round="30" :show="bindwx">
			<view class="bindwx">
				<view class="skip" @click="skip">跳过</view>
				<view class="txt">建议您绑定微信，绑定后可同步此账号数据，并可使用微信一键登录</view>
				<!-- #ifdef APP-PLUS -->
				<view class="btn" @click="sureBindwx">一键绑定</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn" open-type="getUserInfo" @getuserinfo="getWxMpUserInfo">一键绑定</button>
				<!-- #endif -->
			</view>
		</u-popup>
		<!-- 微信登录绑定手机号弹窗 -->
		<u-popup :round="30" :show="wxbindPhone" @close="wxbindPhone = false" @open="wxbindPhone = true">
			<view class="bind_num">
				<view class="txt">为提供更好的服务，使您的数据同步，建议您绑定手机号码使用</view>
				<!-- #ifdef APP-PLUS -->
				<view class="flex account_ipt">
					<view class="flex textStyle align-center">
						<view class="">+86</view>
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/drowDown.png" class="drowDownIcon">
						</image>
					</view>
					<input type="number" placeholder="请输入手机号" v-model="bindFrom.phone" />
				</view>
				<view class="flex password_ipt">
					<view class="textStyle">验证码</view>
					<input type="number" class="code_num" placeholder="请输入验证码" v-model="bindFrom.vcode" />
					<view class="line"></view>
					<view class="code_text" @click="getMsgCode(3, bindFrom.phone)">
						{{ !codeTime ? '获取验证码' : codeTime + 's后重新获取' }}
					</view>
				</view>

				<view class="btn" @click="sureBindNum" v-if="isand">一键绑定</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键绑定</button>
				<!-- #endif -->
			</view>
		</u-popup>
		<!-- modal弹窗 手机号已注册  未绑定微信 -->
		<u-modal showCancelButton :show="modal1.show" :title="modal1.title" :content="modal1.content"
			@confirm="sureSubmit" @cancel="cancel"></u-modal>
		<!-- modal2弹窗 手机号已注册  并且已经绑定微信 -->
		<u-modal showCancelButton :show="modal2.show" :title="modal2.title" :content="modal2.content"
			:confirmText="modal2.confirm" :cancelText="modal2.cancel" @confirm="loginThe" @cancel="changePhone">
		</u-modal>
	</view>
</template>

<script>
	import {
		smsCodeLogin,
		userLogin,
		msgCode,
		register,
		userDetails,
		wxlogin as wxloginApi,
		bindwx as bindwxApi,
		bindPhone,
		wxMpLogin,
		getPhoneNumber,
		postCodeUserInfo
	} from '@/apis/apis.js';
	export default {
		data() {
			return {
				show: false, //弹窗
				leftDown: false, //控制左上角图标显示
				chooseLoginWay: true, // true 验证码登录 false密码登录
				checked: false, // 协议勾选
				agree: false, // 提示
				// 验证码登录
				smsFrom: {
					phone: '',
					code: '',
					source: null // 来源 1小程序, 4 android,3 ios
				},
				// 账号密码登录
				userForm: {
					userName: null,
					password: null
				},
				isPwd: true,
				registerBoolean: false, // 显示注册
				// 注册表单
				registerInfo: {
					phone: '',
					vcode: '',
					password: ''
				},
				codeTime: 0, // 获取验证码倒计时
				bindwx: false, // 绑定微信弹窗
				wxbindPhone: false, // 微信登录绑定手机弹窗
				bindFrom: {
					phone: '',
					vcode: ''
				},
				modal1: {
					show: false,
					title: '将要绑定的手机号码已存在',
					content: '您即将绑定的手机号码已注册存在，绑定后将合并您的个人数据',
					confirm: '确认',
					cancel: '取消'
				},
				modal2: {
					show: false,
					title: '将要绑定的手机号码已存在',
					content: '您即将绑定的手机号码已注册存在，且已经绑定微信，登录后可解除并重新绑定',
					confirm: '登录该账号',
					cancel: '更换手机'
				},
				list: {},
				timer: null, //定时器
				userInfo: {},
				remenber: false,
				isand: true,
				//微信登录
				wxMpLoginObj: null,
			};
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		onLoad() {
			let that = this;

			uni.getSystemInfo({
				success: function(res) {
					// #ifdef APP-PLUS
					if (res.platform == 'ios') {
						that.isand = false;
					}
					// #endif
				}
			});
		},
		onShow() {
			if (uni.getStorageSync('userName')) {
				this.userForm.userName = uni.getStorageSync('userName');
				this.smsFrom.phone = uni.getStorageSync('userName');
			}
			if (uni.getStorageSync('password')) {
				this.userForm.password = uni.getStorageSync('password');
			}
		},
		methods: {
			sureSubmit() {
				console.log('确定');
			},
			cancel() {
				console.log('取消');
			},
			// 登录该账号
			loginThe() {
				console.log('登录该账号');
				console.log(this.bindFrom);
				this.smsFrom.phone = this.bindFrom.phone;
				this.modal2.show = false;
				this.wxbindPhone = false;
			},
			// 换个手机
			changePhone() {
				console.log('换个手机');
				this.modal2.show = false;
				this.wxbindPhone = true;
			},

			// 点击一键绑定 微信
			sureBindwx() {
				uni.showLoading({
					mask: true
				});
				console.log('一键绑定 微信');

				uni.login({
					provider: 'weixin',
					success: user => {
						console.log(user);
						// #ifdef APP-PLUS
						let data = {
							openid: user.authResult.openid,
							unionid: user.authResult.unionid
						};
						this.onekeyBindwx(data);
						// #endif
					},
                    fail() {
                        uni.hideLoading();
                    }
				});
			},
			// 微信小程序绑定手机号
			getPhoneNumber(e) {
				console.log(e)
				uni.showLoading({
					mask: true
				});
				const {
					encryptedData,
					iv
				} = e.detail;
				for (let i in this.wxMpLoginObj) {
					this.wxMpLoginObj[i] = this.wxMpLoginObj[i] || '';
				}
				let data = {
					encryptedData,
					iv,
					...this.wxMpLoginObj
				};
				getPhoneNumber(data).then(res => {
					console.log(res)
					this.bindwx = false;
					uni.showToast({
						title: '绑定成功'
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/start/start'
						});
					}, 1000)
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				})
			},
			// 一键绑定微信接口
			onekeyBindwx(data) {
				console.log(data);
				bindwxApi(data)
					.then(res => {
						console.log(res);
						this.bindwx = false;
						uni.showToast({
							title: '绑定成功'
						});
						uni.reLaunch({
							url: '/pages/start/start'
						});
					})
					.catch(err => {
						console.log(err);
						uni.showToast({
							title: err.msg,
							icon: 'none'
						});
					});
			},
			// 跳过绑定微信
			skip() {
				this.bindwx = false;
				uni.reLaunch({
					url: '/pages/start/start'
				});
			},
			//微信登录
			wxLogin() {
				if (!this.checked) {
					this.agree = true;
					uni.showToast({
						title: '请输勾选用户协议',
						icon: 'none'
					});
					return;
				}

				uni.login({
					provider: 'weixin',
					timeout: 1000 * 6,
					success: login => {
						console.log(login);
						uni.showLoading({
							title: '登录中',
							mask: true
						});
						// #ifdef APP-PLUS
						let data = {
							openid: login.authResult.openid,
							unionid: login.authResult.unionid
						};
						this.wxLoginProvider(data);
						// #endif
						// #ifdef MP-WEIXIN
						const {
							code
						} = login;
						uni.getUserInfo({
							provider: 'weixin',
							success: data => {
								console.log(data);
								const {
									iv,
									encryptedData
								} = data;
								wxMpLogin({
										iv,
										encryptedData,
										code
									})
									.then(res => {
										console.log(res);
										uni.setStorageSync('token', res.data);
										this.loginSuccess();
										setTimeout(() => {
											uni.hideLoading();
											uni.reLaunch({
												url: '/pages/start/start'
											});
										}, 1200);
									})
									.catch(err => {
										uni.hideLoading();
										if (err.code == 1002) {
											this.wxMpLoginObj = err.data;
											this.wxbindPhone = true;
											// 检测剪切板是否有分享id
											const shareData = uni.getStorageSync('shareData');
											if (shareData && shareData.memberId) {
												this.bindFrom.shareMember = shareData.memberId;
											}
										}
									});
							}
						});
						// #endif
					}
				});
			},
			// app微信登录接口
			wxLoginProvider(data) {
				wxloginApi(data)
					.then(res => {
						console.log(res);
						uni.setStorageSync('token', res.data);
						this.loginSuccess();
						setTimeout(() => {
							uni.hideLoading();
							uni.reLaunch({
								url: '/pages/start/start'
							});
						}, 1200);
					})
					.catch(err => {
						console.log(err);
						uni.hideLoading();
						if (err.code == 1002) {
							this.wxbindPhone = true;
							// 检测剪切板是否有分享id
							const shareData = uni.getStorageSync('shareData');
							if (shareData && shareData.memberId) {
								this.bindFrom.shareMember = shareData.memberId;
							}
						}
					});
			},
			// 微信登录一键绑定手机号
			sureBindNum() {
				const boo = this.validaWxBindPhone();
				if (!boo) return;
				uni.getUserInfo({
					provider: 'weixin',
					success: user => {
						console.log(user);
						const data = {
							headimgurl: user.userInfo.avatarUrl,
							nickname: user.userInfo.nickName,
							openid: user.userInfo.openId,
							sex: user.userInfo.gender,
							unionid: user.userInfo.unionId,
							...this.bindFrom
						};
						this.wxBindPhoneApi(data);
					}
				});
			},
			// 微信小程序 一键绑定微信
			getWxMpUserInfo(data) {
				console.log(data);
				uni.showLoading({
					mask: true
				});
				uni.login({
					provider: 'weixin',
					timeout: 1000 * 6,
					success: login => {
						console.log(login)
						const {
							code
						} = login;
						const {
							iv,
							encryptedData
						} = data.detail;
						let obj = {
							iv,
							encryptedData,
							code
						};
						console.log(obj)
						postCodeUserInfo(obj).then(res => {
							this.onekeyBindwx({
								appletOpenid: res.data.appletOpenid,
								unionid: res.data.unionid,
							});

						}).catch(err => {

						})
					}
				})
			},
			// app微信绑定手机
			wxBindPhoneApi(data) {
				console.log(data);
				bindPhone(data)
					.then(res => {
						console.log('绑定手机号', res);
						uni.setStorageSync('token', res.data);
						this.loginSuccess();
						uni.showToast({
							title: '成功绑定手机号'
						});
						this.wxbindPhone = false;
						uni.reLaunch({
							url: '/pages/start/start'
						});
					})
					.catch(err => {
						console.log(err);
						if (err.msg == '手机号已被绑定') {
							this.wxbindPhone = false;
							this.modal2.show = true;
						}
					});
			},
			validaWxBindPhone() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				// 判断手机号
				if (!reg.test(this.bindFrom.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.bindFrom.vcode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				return true;
			},
			// 点击新用户注册
			goRegister() {
				this.registerBoolean = true;
				this.chooseLoginWay = false;
				// 检测剪切板是否有分享id
				const shareData = uni.getStorageSync('shareData');
				if (shareData && shareData.memberId) {
					this.registerInfo.shareMember = shareData.memberId;
				}
			},
			// 点击注册
			registers() {
				const boo = this.validationRegister();
				if (boo) {
					register(this.registerInfo).then(res => {
						console.log(res);
						if (res.code == 200) {
							// 注册成功
							uni.setStorageSync('token', res.data);
							this.loginSuccess();
							this.getBindWx();
						}
					});
				}
			},
			// 注册校验
			validationRegister() {
				let regPwd = /^[^\u4e00-\u9fa5 ]{6,16}$/;
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				// 判断手机号
				if (!reg.test(this.registerInfo.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (!this.registerInfo.vcode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				if (!regPwd.test(this.registerInfo.password)) {
					uni.showToast({
						title: '密码不能使用中文和空格，长度在6-16位之间',
						icon: 'none'
					});
					return;
				}
				return true;
			},
			// 点击登录
			login() {
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				// true 验证码登录 false 账号密码登录
				if (this.chooseLoginWay) {
					// 验证码登录
					this.msgLogin();
				} else {
					// 账号密码登录
					this.userLogin();
				}
			},
			// 账号密码登录
			userLogin() {
				const boo = this.validationUserLogin();
				if (boo) {
					userLogin(this.userForm).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '登录成功',
								duration: 800
							});
							if (this.remenber) {
								uni.setStorageSync('userName', this.userForm.userName);
								uni.setStorageSync('password', this.userForm.password);
							} else {
								uni.removeStorageSync('userName');
								uni.removeStorageSync('password');
							}
							uni.setStorageSync('token', res.data);
							this.loginSuccess();
							this.getBindWx();
						}
					});
				}
			},
			// 账号密码登录校验
			validationUserLogin() {
				// 判断手机号
				if (!this.userForm.userName) {
					uni.showToast({
						title: '账号不能为空',
						icon: 'none'
					});
					return;
				}
				if (!this.userForm.password) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					});
					return;
				}
				if (!this.checked) {
					this.agree = true;
					uni.showToast({
						title: '请输勾选用户协议',
						icon: 'none'
					});
					return;
				}
				return true;
			},
			// 验证码登录
			msgLogin() {
				const boo = this.validationMsgLogin();
				if (uni.getSystemInfoSync().platform == 'ios') {
					this.smsFrom.source = 3;
				} else if (uni.getSystemInfoSync().platform == 'android') {
					this.smsFrom.source = 4;
				}
				if (boo) {
					smsCodeLogin(this.smsFrom).then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.showToast({
								title: '登录成功',
								duration: 800
							});
							if (this.remenber) {
								uni.setStorageSync('userName', this.smsFrom.phone);
							}
							uni.setStorageSync('token', res.data);
							this.loginSuccess();
							this.getBindWx();
						}
					});
				}
			},
			// 验证码登录校验
			validationMsgLogin() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				// 判断手机号
				if (!reg.test(this.smsFrom.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}
				if (!this.smsFrom.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				if (!this.checked) {
					this.agree = true;
					uni.showToast({
						title: '请输勾选用户协议',
						icon: 'none'
					});
					return;
				}
				return true;
			},

			// 获取验证码 传入手机号 类型
			getMsgCode(type, num) {
				// 发送类型(1 ：登录, 2：注册, 3：绑定手机号)
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				//判断手机号格式
				if (!reg.test(num)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.codeTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: 'none'
					});
					return;
				}
				// 发送短信接口
				msgCode({
					phone: num,
					type: type
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '短信发送成功！',
							icon: 'none'
						});
						this.codeTime = 60;
						let timer = setInterval(() => {
							this.codeTime--;
							if (this.codeTime < 1) {
								clearInterval(timer);
								this.codeTime = 0;
							}
						}, 1000);
					}
				});
			},
			// 登录成功后
			loginSuccess() {
				this.$attribution();
			},
			// 登录成功后判断是否绑定微信
			getBindWx() {
				userDetails().then(res => {
					if (res.data.wxOpenid || !this.isand) {
						uni.reLaunch({
							url: '/pages/start/start'
						});
					} else {
						this.bindwx = true;
					}
				});
			},
			//跳转用户协议
			userArgeement(type) {
				uni.navigateTo({
					url: '../argeement/userArgeement?type=' + type
				});
			},
			//图标返回
			back() {
				this.chooseLoginWay = true;
				this.registerBoolean = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	$fontSize13: 26rpx;
	$fontSize14: 28rpx;
	$fontSize16: 32rpx;
	$fontSize15: 30rpx;

	.remenbers {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		color: #555555;
		font-size: 13px;

		text {
			margin-left: 3vw;
		}
	}

	.content {
		height: 100vh;
		background-image: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/logobg.png');
		background-repeat: no-repeat;
		background-size: cover;

		.bindwx {
			position: relative;

			.skip {
				position: absolute;
				top: 46rpx;
				right: 46rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}

			.txt {
				width: 600rpx;
				margin: 150rpx auto 0;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #363636;
				line-height: 56rpx;
			}

			.btn {
				width: 600rpx;
				height: 90rpx;
				margin: 100rpx auto 70rpx;
				line-height: 90rpx;
				text-align: center;
				color: #ffffff;
				background: #194FC9;
				box-shadow: 0rpx 12rpx 16rpx 0rpx rgba(82, 163, 255, 0.44);
				border-radius: 45rpx;
			}
		}

		.bind_num {
			padding: 40rpx;

			.txt {
				font-size: 28rpx;
				font-weight: 500;
				color: #363636;
				line-height: 56rpx;
			}

			.btn {
				width: 600rpx;
				height: 90rpx;
				margin: 70rpx auto 30rpx;
				line-height: 90rpx;
				text-align: center;
				color: #ffffff;
				background: #194FC9;
				box-shadow: 0rpx 12rpx 16rpx 0rpx rgba(82, 163, 255, 0.44);
				border-radius: 45rpx;
			}
		}
	}

	.align-center {
		align-items: center;
	}

	.left_icon {
		height: 46rpx;
		width: 46rpx;
		margin-top: 3.97vh;
		margin-left: 4vw;
	}

	.left_icon_box {
		height: 46rpx;
		width: 46rpx;
	}

	.drowDownIcon {
		width: 24rpx;
		height: 14rpx;
		margin-left: 10rpx;
	}

	.logo {
		margin-top: 8vh;
		margin-left: 40.8vw;
		width: 134rpx;
		height: 134rpx;
		border-radius: 30rpx;
		margin-bottom: 40rpx;

		&>image {
			width: 100%;
			height: 100%;
		}
	}

	.loginBtn {
		color: #fff;
		background-color: #194FC9;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 40rpx;
		text-align: center;
	}

	.logo_text {
		font-family: TRENDS;
		font-size: 40rpx;
		margin-left: 39.07vw;
		margin-bottom: 80rpx;
		color: #194FC9;
		font-family: PingFang-SC-Medium;
	}

	.flex {
		display: flex;
		align-self: center;
	}

	.felx_column {
		flex-direction: column;
	}

	.bottom_box {
		width: 86.4vw;
		margin: 0 auto;
		margin-bottom: 20rpx;
		height: 24vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.password_Login {
		margin-left: 7.6vw;
		width: 200rpx;
		font-size: 28rpx;
		color: #555555;
		font-family: PingFang-SC-Medium;
	}

	.resgister {
		color: #555555;
		font-size: 28rpx;
		margin-left: 40vw;
		font-family: PingFang-SC-Medium;
	}

	.button_login {
		margin-left: 7.07vw;
		margin-right: 7.6vw;
		margin-bottom: 20rpx;
	}

	.way_box {
		margin: 20rpx 0 40rpx 0;
	}

	.agreement_box {
		color: #555555;
		font-size: 26rpx;
		margin-left: 3vw;
	}

	.agreement {
		color: #194FC9;
	}

	.check_box {
		display: block;
		width: 36rpx;
		height: 36rpx;
	}

	.check_img_left {
		width: 36rpx;
		height: 36rpx;
		margin-top: 4rpx;
		margin-left: 7vw;
	}

	.agree_color {
		border: 1rpx solid #f00;
		border-radius: 50%;
	}

	.wxIconImg {
		width: 74rpx;
		height: 74rpx;
		margin: 40rpx 0 16rpx 0;
	}

	.ohter_Login_way {
		color: #7a7a7a;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
	}

	.wx_text {
		color: #999999;
		font-size: $fontSize13;
	}

	.textStyle {
		width: 100rpx;
		font-size: $fontSize16;
		color: #393939;
		margin-right: 4vw;
	}

	.account_ipt {
		height: 100rpx;
		border-bottom: 1rpx solid #e2e2e2;
		align-items: center;
	}

	.password_ipts {
		display: flex;
		height: 100rpx;
		margin: 40rpx 0 0 0;
		align-items: center;
		border-bottom: 1rpx solid #e2e2e2;
	}

	.password_ipt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		margin: 40rpx 0 0 0;
		border-bottom: 1rpx solid #e2e2e2;
	}

	.moblie_login_box,
	.password_login_box {
		margin: 0 7vw 0 7vw;
	}

	.code_num {
		flex: 1;
	}

	.code_text {
		color: #194FC9;
		font-size: 30rpx;
	}

	.line {
		width: 1rpx;
		height: 49rpx;
		background-color: #e2e2e2;
		margin-right: 20rpx;
	}

	.register_btn {
		margin: 8vh 7.6vw 0 7.6vw;
	}

	.eyes {
		width: 32rpx;
		height: 32rpx;

		&>image {
			width: 100%;
			height: 100%;
		}
	}
</style>
